<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>导航</title>
        <style>
           ul{list-style:none;padding:0px;}   /*清除UL样式*/
           
           #nav a{                          /*所有a链接正常状态*/
                text-decoration:none;
                background:deeppink;
                display:block;
                width:120px;
                height:30px;
                color:white;
                font-weight:bold;
                border-radius:3px;
           }
           
           #nav li{                 /* 所有li的正常样式 */
                width:120px;
                height:30px;
                float:left;
                border:0px solid red;
                line-height:30px;
                position:relative;
                text-align:center;
                padding:2px 2px;
                
           }
          #nav #m1 ul{display:none;}
          #nav #m1:hover>ul{display:block;position:absolute;top:34px;left:0px;}
          
          #nav #m2:hover>ul{display:block;position:absolute;top:0px;left:124px;}
        </style>
    </head>
    <body>
        <div id='nav'>
            <ul>
                <li><a href=''>首页</a></li>
                <li id='m1'><a href=''>商品展示</a>
                    <ul>
                        <li><a href=''>男装</a></li>
                        <li id='m2'><a href=''>女装</a>
                            <ul>
                                <li><a href=''>警服</a></li>
                                <li><a href=''>校服</a></li>
                                <li><a href=''>水手服</a></li>
                            </ul>
                        </li>
                        <li><a href=''>童装</a></li>
                    </ul>
                </li>
                <li><a href=''>限时抢购</a></li>
                <li><a href=''>1元秒杀</a></li>
                <li><a href=''>真人直播</a></li>
            </ul> 
        </div>        
    </body>
</html>